<template>
  <div class="fillcontain">
    <!--<head-top></head-top>-->
    <div class="table_container">
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%">
        <el-table-column
          type="index"
          width="100">
        </el-table-column>
        <el-table-column
          property="userId"
          label="用户id"
          width="220">
        </el-table-column>
        <el-table-column
          property="userName"
          label="用户姓名"
          width="220">
        </el-table-column>
        <el-table-column
          property="phone"
          label="电话">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="220">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>

        </el-table-column>
      </el-table>
      <div class="Pagination" style="text-align: left;margin-top: 10px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="5"
          layout="prev, pager, next"
          :total="count">
        </el-pagination>

      </div>
    </div>
  </div>
</template>

<script>
  //  import headTop from '../components/headTop'
  import { getDiscList } from 'api/recommend'
  import { ERR_OK } from 'api/config'
  export default {
    data () {
      return {
        tableData: [ ],
        currentRow: null,
        offset: 0,
        limit: 5,
        count: 0,
        currentPage: 1
      }
    },
    components: {
//      headTop
    },
    created () {
//      this.initData()
    },
    mounted () {
      let me = this
      me.initData()
    },
    methods: {
      async initData (page) {
        getDiscList(page).then((res) => {
          if (res.statusText === ERR_OK) {
            this.tableData = res.data.dataList
            this.count = res.data.dataTotal
          } else {
            console.log('获取数据失败' + res.statusText)
          }
        })
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange (val) {
        this.currentPage = val
        this.offset = (val - 1) * this.limit
        this.getUsers()
      },
      async getUsers () {
        await this.initData({currentPage: this.currentPage, limit: this.limit})
        /* this.tableData = []
        Users.forEach(item => {
          const tableData = {}
          tableData.username = item.username
          tableData.registe_time = item.registe_time
          tableData.city = item.city
          this.tableData.push(tableData)
        }) */
      },
      handleClick (row) {
        console.log(row)
      },
      deleteRow (index, rows) {
        rows.splice(index, 1)
      }
    }
  }
</script>

<style lang="less">
  @import '../../style/mixin';

  .table_container {
    padding: 20px;
  }
</style>
